<template>
  <div>
    <div>
      <div>
        <el-select
          v-model="searchRecord.serverId"
          size="mini"
          style="width: 200px; margin-right: 20px"
          placeholder="告警服务"
          clearable
          filterable
          @change="
            searchRecord.currentPage = 1
            searchRecord.size = 10
            initRecord()
          "
        >
          <el-option v-for="item in servers" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select
          v-model="searchRecord.level"
          size="mini"
          style="width: 200px; margin-right: 20px"
          placeholder="告警等级"
          clearable
          filterable
          @change="
            searchRecord.currentPage = 1
            searchRecord.size = 10
            initRecord()
          "
        >
          <el-option v-for="item in levels" :key="item.code" :label="item.desc" :value="item.code"></el-option>
        </el-select>
        <el-select
          v-model="searchRecord.processStatus"
          size="mini"
          style="width: 200px; margin-right: 20px"
          placeholder="告警状态"
          clearable
          filterable
          @change="
            searchRecord.currentPage = 1
            searchRecord.size = 10
            initRecord()
          "
        >
          <el-option v-for="item in processStatus" :key="item.code" :label="item.desc" :value="item.code"></el-option>
        </el-select>
      </div>
      <div style="margin-top: 10px">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="datePickerConfig"
          range-separator="至"
          start-placeholder="记录开始时间"
          end-placeholder="记录结束时间"
          align="right"
          :default-time="['00:00:00', '23:59:59']"
          style="margin-right: 20px"
          @change="
            searchRecord.currentPage = 1
            searchRecord.size = 10
            initRecord()
          "
        ></el-date-picker>
        <el-button icon="el-icon-delete" type="warning" size="mini" @click="resetRecord">重置</el-button>
        <el-button
          type="success"
          size="mini"
          icon="el-icon-search"
          @click="
            searchRecord.currentPage = 1
            searchRecord.size = 10
            initRecord()
          "
        >
          搜索
        </el-button>
        <el-button
          icon="el-icon-delete"
          type="danger"
          size="mini"
          :disabled="multipleSelection.length === 0"
          @click="deleteRecords"
        >
          删除选中的记录
        </el-button>
      </div>
    </div>

    <div style="margin-top: 10px">
      <el-table
        size="mini"
        :data="recordData"
        ref="multipleTable"
        border
        stripe
        tooltip-effect="dark"
        :row-class-name="tableRowClassName"
        :row-key="getRowKeys"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" width="55" type="selection" :selectable="selectable"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="background-color: aliceblue">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item>
                  <a href="http://111.231.71.116:5601/login?next=%2F" target="_blank">日志平台地址</a>
                </el-form-item>
                <el-form-item label="告警消息">
                  <span>{{ props.row.message }}</span>
                </el-form-item>
                <el-form-item label="告警异常">
                  <span>{{ props.row.exception }}</span>
                </el-form-item>
                <el-form-item label="备注" v-if="props.row.remark">
                  <span>{{ props.row.remark }}</span>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="服务名称" align="center" prop="serverName"></el-table-column>
        <el-table-column label="链路编号" align="center" prop="traceId" width="350"></el-table-column>
        <el-table-column label="告警等级" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.level === RecordLevel.WARN">warn</el-tag>
            <el-tag type="danger" v-else-if="scope.row.level === RecordLevel.ERROR">error</el-tag>
            <el-tag v-else>-</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center" width="80">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.processStatus === RecordProcessStatus.status_0">未处理</el-tag>
            <el-tag type="warning" v-else-if="scope.row.processStatus === RecordProcessStatus.status_1">处理中</el-tag>
            <el-tag type="info" v-else-if="scope.row.processStatus === RecordProcessStatus.status_2">已关闭</el-tag>
            <el-tag v-else>-</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="记录时间" width="200" align="center" prop="createTime" sortable></el-table-column>
        <el-table-column label="处理时间" width="200" align="center" prop="processTime" sortable></el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.processStatus === RecordProcessStatus.status_0"
              size="mini"
              style="padding: 3px"
              type="warning"
              @click="doProcess(scope.row.id)"
            >
              认领
            </el-button>
            <el-button
              v-else-if="scope.row.processStatus === RecordProcessStatus.status_1"
              size="mini"
              style="padding: 3px"
              type="success"
              @click="doClose(scope.row.id)"
            >
              关闭
            </el-button>
            <el-button
              v-else-if="scope.row.processStatus === RecordProcessStatus.status_2"
              size="mini"
              style="padding: 3px"
              type="danger"
              @click="doDel(scope.row)"
            >
              删除
            </el-button>

            <el-button
              v-if="
                scope.row.processStatus === RecordProcessStatus.status_0 ||
                scope.row.processStatus === RecordProcessStatus.status_1
              "
              type="info"
              size="mini"
              style="padding: 3px"
              @click="showView(scope.row)"
            >
              备注
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="display: flex; justify-content: flex-end; margin-top: 5px">
      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :current-page="searchRecord.currentPage"
        :page-size="searchRecord.size"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      ></el-pagination>
    </div>

    <!-- 备注框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      @close="closeDialog()"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form ref="recordForm" :model="record">
        <table>
          <tr>
            <el-form-item>
              <el-input
                type="textarea"
                :rows="5"
                size="mini"
                style="width: 555px; font-size: 20px"
                v-model="record.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </tr>
        </table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doRecord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { recordPageData, updateRecord, deleteRecord, deleteRecords } from '@/api/alarm/record'
import { RecordLevel, RecordProcessStatus } from '@/constant/Record'
import { serverGetAll } from '@/api/alarm/server'

export default {
  name: 'Record',
  data() {
    return {
      getRowKeys(row) {
        return row.id
      },
      searchRecord: {
        serverId: null,
        level: null,
        processStatus: null,
        startTime: '',
        endTime: '',
        currentPage: 1,
        size: 10
      },
      servers: [],
      recordData: [],
      loading: false,
      total: 0,
      dateValue: '',
      levels: store.getters.levels,
      processStatus: store.getters.processStatus,
      title: '',
      dialogVisible: false,
      record: {
        id: null,
        processStatus: null,
        remark: ''
      },
      multipleSelection: []
    }
  },
  computed: {
    RecordLevel() {
      return RecordLevel
    },
    RecordProcessStatus() {
      return RecordProcessStatus
    }
  },
  mounted() {
    this.initServer()
    // 接收参数
    let query = this.$route.query
    if (query.startTime && query.endTime) {
      this.dateValue = [query.startTime, query.endTime]
      this.searchRecord.startTime = query.startTime
      this.searchRecord.endTime = query.endTime
    }
    if (query.serverId) {
      this.searchRecord.serverId = parseInt(query.serverId)
    }
    if (query.level) {
      this.searchRecord.level = parseInt(query.level)
    }
    if (query.processStatus) {
      this.searchRecord.processStatus = parseInt(query.processStatus)
    }
    this.initRecord()
  },
  methods: {
    initServer() {
      serverGetAll().then((resp) => {
        if (resp) {
          this.servers = resp
        }
      })
    },
    initRecord() {
      if (this.dateValue !== null && this.dateValue.length === 2) {
        let startTime = this.dateValue[0]
        let endTime = this.dateValue[1]
        this.searchRecord.startTime = startTime
        this.searchRecord.endTime = endTime
      } else {
        this.searchRecord.startTime = ''
        this.searchRecord.endTime = ''
      }

      this.loading = true
      recordPageData(this.searchRecord).then((resp) => {
        this.loading = false
        if (resp) {
          this.recordData = resp.data
          this.total = resp.total
        }
      })
    },
    currentChange(page) {
      this.searchRecord.currentPage = page
      this.initRecord()
    },
    sizeChange(size) {
      this.searchRecord.size = size
      this.initRecord()
    },
    resetRecord() {
      this.searchRecord.serverId = null
      this.searchRecord.level = null
      this.searchRecord.processStatus = null
      this.dateValue = ''
    },
    doProcess(id) {
      let params = {
        id: id,
        processStatus: 1
      }
      updateRecord(params).then((resp) => {
        if (resp) {
          this.initRecord()
        }
      })
    },
    doClose(id) {
      let params = {
        id: id,
        processStatus: 2
      }
      updateRecord(params).then((resp) => {
        if (resp) {
          this.initRecord()
        }
      })
    },
    doDel(row) {
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRecord(row.id).then((resp) => {
            if (resp) {
              this.initRecord()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    showView(data) {
      // 拷贝
      this.record.id = data.id
      this.record.processStatus = data.processStatus
      this.record.remark = data.remark
      this.title = '备注'
      this.dialogVisible = true
    },
    closeDialog() {
      this.record.id = null
      this.record.processStatus = null
      this.record.remark = ''
    },
    doRecord() {
      updateRecord(this.record).then((resp) => {
        if (resp) {
          this.initRecord()
          this.dialogVisible = false
        }
      })
    },
    selectable(row, index) {
      return row.processStatus === RecordProcessStatus.status_2
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRecords() {
      if (this.multipleSelection.length > 0) {
        let ids = []
        this.multipleSelection.forEach((val, index) => {
          ids.push(val.id)
        })

        let params = {
          ids: ids
        }
        this.$confirm('此操作将永久删除选中的记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteRecords(params).then((resp) => {
              if (resp) {
                this.initRecord()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
}
</script>

<style>
.el-checkbox {
  width: 14px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

label {
  display: inline-block;
  width: 100px;
  text-align: right;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 60px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
